<template>
  <div ref="chinaMap" class="chinaMap" style="width: 330px; height: 210px" />
</template>
<script>
import '@/utils/echarts/map/js/china.js'
import * as echarts from 'echarts'
export default {
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      const mapcharts = this.$echarts.init(this.$refs.chinaMap)
      // 窗口尺寸改变
      window.addEventListener('resize', function() {
        mapcharts.resize()
      })
      var value1 = 0.42
      var value2 = 0.50
      var data = [value1, value2]
      // 绘制图表
      mapcharts.setOption({
        title: [
          {

            x: '25%',
            y: 30,
            textAlign: 'center',
            textStyle: {
              color: '#212b43',

              fontFamily: 'Microsoft Yahei',
              fontWeight: '100',
              textAlign: 'center'
            }
          },
          {

            x: '75%',
            y: 30,
            textAlign: 'center',
            textStyle: {
              color: '#212b43',
              fontSize: 16,
              fontFamily: 'Microsoft Yahei',
              fontWeight: '100',
              textAlign: 'center'
            }
          },
          {
            text: (value1 * 100).toFixed(0) + '%',
            left: '25%',
            top: '38%',
            textAlign: 'center',
            textStyle: {

              fontWeight: '300',
              color: '#a06a0a',
              textAlign: 'center',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#fff',
              textShadowBlur: '0',
              textShadowOffsetX: 0,
              textShadowOffsetY: 1
            }
          },
          {
            text: (value2 * 100).toFixed(0) + '%',
            left: '75%',
            top: '38%',
            textAlign: 'center',
            textStyle: {

              fontWeight: '300',
              color: '#02456d',
              textAlign: 'center',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#fff',
              textShadowBlur: '0',
              textShadowOffsetX: 0,
              textShadowOffsetY: 1
            }
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '50%',
            z: 6,
            center: ['25%', '50%'],
            // color:[ {
            //     type: 'linear',
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [{
            //         offset: 1,
            //         color: 'rgba(2, 159, 200, 1)'
            //     }, {
            //         offset: 0.5,
            //         color: 'rgba(0, 186, 211, .5)'
            //     }, {
            //         offset: 0,
            //         color: 'rgba(0, 230, 220, 1)'
            //     }],
            //     globalCoord: false
            // }],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(251, 173, 23, 0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(251, 173, 23, .2)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(251, 173, 23, 1)'
                  }
                ],
                globalCoord: false
              }
            ],
            data: data,
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent'
            },
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
          {
            name: '第二层白边',
            type: 'pie',
            z: 3,
            radius: ['0%', '55%'],
            center: ['25%', '50%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#fefefe'
                      },
                      {
                        offset: 1,
                        color: '#e7e8ea'
                      }
                    ])
                  }
                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          },
          {
            name: '最外绿边',
            type: 'pie',
            z: 1,
            radius: ['0%', '58%'],
            center: ['25%', '50%'],

            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#fdc56e'
                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          },
          {
            type: 'liquidFill',
            radius: '50%',
            z: 6,
            center: ['75%', '50%'],
            // color: ['#c1dce7', '#90d3f0', '#009bdb'],
            // color: {
            //   type: 'linear',
            //   x: 0,
            //   y: 0,
            //   x2: 0,
            //   y2: 1,
            //   colorStops: [
            //     {
            //       offset: 1,
            //       color: 'rgba(0, 155, 219, 0)'
            //     },
            //     {
            //       offset: 0.5,
            //       color: 'rgba(0, 155, 219, .2)'
            //     },
            //     {
            //       offset: 0,
            //       color: 'rgba(0, 155, 219, 1)'
            //     }
            //   ],
            //   globalCoord: false
            // },
            data: [0.6, { value1: 0.42, direction: 'left' }, 0.4, 0.3],
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent'
            },
            label: {
              normal: {
                formatter: ''
              }
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0
              },
              borderDistance: 0
            }
          },
          {
            name: '第二层白边',
            type: 'pie',
            z: 3,
            radius: ['0%', '55%'],
            center: ['75%', '50%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#fefefe'
                      },
                      {
                        offset: 1,
                        color: '#e7e8ea'
                      }
                    ])
                  }
                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          },
          {
            name: '最外蓝边',
            type: 'pie',
            z: 1,
            radius: ['0%', '58%'],
            center: ['75%', '50%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#07a2e3'

                }
              },
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
<style>
</style>
